<template>
  <div class="ques box bg clmcenter">
    <div class="backbox">
      <img
        src="@/assets/img/back.png"
        class="goback"
        @click="$router.replace({ path: '/index', query: { intxt: 'back' } })"
      />
    </div>
    <div class="quesbox" v-if="queslist.length > 0">
      <!-- <div class="scorebox">
        <img src="@/assets/img/questitle.png" class="questitle" /> -->
      <!-- <span
          >当前得分：<span>{{ score }}</span></span
        > -->
      <!-- </div> -->
      <div class="quesinfobox">
        <div class="quesinfo clmstart">
          <div class="sumqnum">
            <i>{{ sindex }}/{{ queslist.length }}</i>
          </div>
          <div class="question">
            <p>{{ queslist[sindex - 1].title }}</p>
            <p>(单选)</p>
          </div>
          <div
            class="qitem"
            v-for="item in queslist[sindex - 1].answer"
            :key="item.id"
            @click="chooseAns(queslist[sindex - 1].id, item.letter)"
          >
            <div class="optletter">
              {{ item.letter }}
            </div>
            <div
              class="optwords"
              :style="{ backgroundColor: item.cflag ? '#d70107' : '' }"
            >
              {{ item.word }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btnbox subbtnbox">
      <img src="@/assets/img/cfm.png" @click="submitQues" />
    </div>
    <!-- 答题分数提示 -->
    <div class="tkbox dtresult clmcenter" v-show="tjflag">
      <div class="tk_container clmstart">
        <p class="title">恭喜您</p>
        <div class="tk_infobox">
          <div class="tk_info clmcenter">
            <p>答题成功</p>
            <p>
              一共获得<span>{{ score }}</span
              >积分
            </p>
          </div>
        </div>
      </div>
      <div class="btnbox" @click="$router.replace({ path: '/index', query: { intxt: 'back' } })">
        <img src="@/assets/img/cjtoindex.png" />
      </div>
    </div>
    <!-- 对错提示 -->
    <div class="tkbox duicuobox clmcenter" v-show="tipsflag">
      <div class="tk_container clmstart">
        <p class="title">{{ istrue ? "回答正确" : "回答错误" }}</p>
        <div class="tk_infobox">
          <div class="tk_info clmcenter" v-show="istrue">
            <img src="@/assets/img/dui.png" class="duicuotipimg" />
            <p class="tipswords">
              恭喜您，答对啦！<br />
              获得 <span>5</span> 积分
            </p>
          </div>
          <div class="tk_info clmcenter" v-show="!istrue">
            <img src="@/assets/img/cuo.png" class="duicuotipimg" />
            <p class="tipswords" v-show="!istrue">
              很抱歉，答错了! <br />正确答案是：<span
                >{{ trueopt.toUpperCase() }}：{{ trueAns }}</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="btnbox">
        <img src="@/assets/img/next.png" @click="nextQustion" />
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      score: 0, //得分
      sindex: 1, //当前是第几题
      queslist: [], //题目列表
      // answerlist: [], //用户选择的答案列表
      answer: {}, //当前答案
      listshow: false,
      tipsflag: false, //对错提示
      tjflag: false, //提交成功
      istrue: false, //答案是否正确
      trueopt: "", //正确选项
      trueAns: "", //正确答案
    };
  },
  created() {
    this.getQuestionList();
  },
  methods: {
    //获取题目列表
    getQuestionList() {
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      this.$http.post("/getQuestionLists").then((res) => {
        Toast.clear();
        if (res.data.code == 200) {
          let list = res.data.data.questions;
          list.forEach((item) => {
            if (item.option_d == "") {
              let dat = {
                id: item.id,
                title: item.content,
                answer: [
                  { letter: "A", word: item.option_a, cflag: false },
                  { letter: "B", word: item.option_b, cflag: false },
                  { letter: "C", word: item.option_c, cflag: false },
                ],
              };
              this.queslist.push(dat);
            } else {
              let dat = {
                id: item.id,
                title: item.content,
                answer: [
                  { letter: "A", word: item.option_a, cflag: false },
                  { letter: "B", word: item.option_b, cflag: false },
                  { letter: "C", word: item.option_c, cflag: false },
                  { letter: "D", word: item.option_d, cflag: false },
                ],
              };
              this.queslist.push(dat);
            }
          });
          if (this.queslist.length == list.length) {
            this.listshow = true;
          }
        } else {
          Toast(res.data.msg);
        }
      });
    },
    //选择答案
    chooseAns(id, letter) {
      this.answer = {
        id,
        answer: letter,
      };
      this.queslist[this.sindex - 1].answer.forEach((item) => {
        if (item.letter == letter) {
          item.cflag = true;
        } else {
          item.cflag = false;
        }
      });
    },
    //提交答题
    submitQues() {
      //判断是否选择了答案
      if (JSON.stringify(this.answer) == "{}") {
        //没有选择答案
        Toast("请点击选择答案");
        return;
      }
      //一题一提交
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      let ansjoin = this.answer.id + "_" + this.answer.answer;
      //提交答案
      this.$http.post("/answer", { answer: ansjoin }).then((res) => {
        Toast.clear();
        if (res.data.code == 200) {
          //提交成功
          let info = res.data.data;
          this.score = info.totalScore;
          this.istrue = info.right == 0 ? false : true;
          this.trueopt = info.option;
          this.trueAns = info.answer;
          this.tipsflag = true;
        } else {
          Toast(res.data.msg);
        }
      });
    },
    //下一题
    nextQustion() {
      this.tipsflag = false;
      if (this.sindex == this.queslist.length) {
        //最后一题
        this.tjflag = true; //积分提示
      } else {
        this.answer = {};
        this.sindex++;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.ques {
  .quesbox {
    position: relative;
    margin-top: 4rem;
    // .scorebox {
    //   width: 100%;
    //   display: flex;
    //   justify-content: space-between;
    //   align-items: center;
    //   .questitle {
    //     width: 65%;
    //   }
    //   span {
    //     font-size: 1.8rem;
    //     span {
    //       font-size: 2rem;
    //     }
    //   }
    // }
    .quesinfobox {
      width: 708px;
      height: 795px;
      background: url("@/assets/img/quesbg.png") repeat;
      background-size: 100% 100%;
      .quesinfo {
        width: 92%;
        margin: 0 auto;
        padding-top: 7rem;
        .sumqnum {
          width: 100%;
          text-align: right;
          i {
            font-size: 2rem;
            font-size: 2.2rem;
            color: #e6111c;
            padding-right: 1rem;
          }
        }
        .question,
        .qitem {
          p,
          div {
            font-size: 2rem;
            text-align: center;
          }
        }
        .question {
          p:first-child {
            font-family: "AlibabaPuHuiTi-2-85-Bold";
          }
        }
        .qitem {
          width: 580px;
          height: 87px;
          overflow: hidden;
          border: 3px solid #707070;
          box-sizing: border-box;
          border-radius: 0.8rem;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 1.5rem;
          .optletter {
            width: 98px;
            height: 100%;
            background: #fed700;
            text-align: center;
            line-height: 87px;
            font-family: "AlibabaPuHuiTi-2-85-Bold";
            font-size: 2.5rem;
          }
          .optwords {
            width: calc(100% - 100px);
            height: 100%;
            line-height: 1;
            text-align: left;
            padding-left: 1rem;
            transition: all 0.5s linear;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
        }
      }
    }
  }
  .btnbox {
    margin-top: 4rem;
  }

  //对错提示弹窗
  .tkbox {
    .tk_container {
      .tk_infobox {
        .tk_info {
          .tipswords {
            font-size: 2rem;
            color: #000000;
            text-align: center;
            padding-top: 3rem;
            span {
              font-size: 2.2rem;
              color: #e6111c;
            }
          }
        }
      }
    }
  }
  // 答题结果
  .dtresult {
    .tk_container {
      .tk_infobox {
        width: 92%;
        height: 365px;
        background: url("@/assets/img/dt_result_img.png") no-repeat;
        background-size: 100% 100%;
        margin: 1.5rem auto 0;
        .tk_info {
          p {
            font-size: 3rem;
            color: #000000;
            text-align: center;
            line-height: 1;
            span {
              font-size: 5rem;
              color: #e6111c;
              padding: 0 1rem;
            }
          }
        }
      }
    }
  }
}
@media only screen and (min-height: 1300px) {
}
@media only screen and (min-height: 1350px) {
}
@media only screen and (min-height: 1400px) {
}
@media only screen and (min-height: 1440px) {
}
@media only screen and (min-height: 1560px) {
}
</style>
